<style lang="less">
    #cinema-detail{
        .van-tabs__nav {
            display: flex;
            justify-content: space-around;
        }
        .van-tab {
            flex-shrink: 1;
        }
        .van-tabs__content{
            padding: 10px 20px 50px;
            font-size: 12px;
        }
        .van-tab__pane {
            line-height: 1.5;
        }
    }
</style>
<style scoped="true" lang="less">
    #cinema-detail {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-direction: column;
        .tabs {
            margin-top: 20px;
            padding: 0 17px;
            background: #fff;
            flex-grow: 3;
        }
    }
    .img-box {
        height: 179px;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .main {
         background: #fff;
    }
    .item {
        display: flex;
        justify-content: space-between;
        height: 86px;
        padding: 25px 17px 0;
        align-items: center;
        .icon {width: 42px;}
        .iconfont {font-size: 28px;}
        .text {
             border-bottom: 1px dotted #999;
            flex-grow: 2;
            line-height: 2;
        }
        .right {
            display: flex;
            flex-grow: 2;
            justify-content: space-between;
            button {
                width: 80px;
            }
            .intro {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
    }
    
   
</style>
<template>
    <div id="cinema-detail">
        <div class="img-box">
            <img src="https://static.m.maizuo.com/v4/static/app/asset/66461d1a02a9eaa64876c90952c42aed.png" alt="">
        </div>
        <div class="main">
            <div class="item">
                <p class="icon"><i class="iconfont icon-icon_ticket cfc"></i></p>
                <div class="right">
                    <p class="intro">
                        <span>订座票</span>
                        <span class="f12 c999">选好场次及座位，到影院自助机取票</span>
                    </p>
                    <Button type="warning" class="f12">立即订票</Button>
                </div>
            </div>
            <div class="item" v-if="obj.address">
                <p class="icon"><i class="iconfont icon-aui-icon-location blue"></i></p>
                <p class="text">{{obj.address}}</p>
            </div>
            <div class="item" v-if="obj.address">
                <p class="icon"><i class="iconfont icon-icon- cfc" style="font-size: 22px;"></i></p>
                <p class="text">
                    <span v-for="(item,index) in obj.telephones" :key="index">{{item}}<i v-if="obj.telephones.length>0&&index<obj.telephones.length-1"> |</i></span>
                </p>
            </div>
        </div>
        <div class="tabs">
            <Tabs>
            	<Tab><i slot="title" class="iconfont icon-icon_ticket"></i>{{descObj['s1']}}</Tab>
            	<Tab><i slot="title" class="iconfont icon-yanjing"></i>{{descObj['s3']}}</Tab>
            	<Tab><i slot="title" class="iconfont icon-parking2"></i>{{descObj['s2']}}</Tab>
                <Tab><i slot="title" class="iconfont icon-iconmonstr-christmas"></i>{{descObj['s4']}}</Tab>
                <Tab><i slot="title" class="iconfont icon-iconbus"></i>{{descObj['s5'] || descObj['s6']}}</Tab>
            </Tabs>
        </div>
    </div>
</template>

<script>
    import {
        loadingBegin,
        loadingFinish
    } from '@/utils'
    import {
        Icon,
        Button,
        Tab,
        Tabs
    } from 'vant'
    export default {
        data() {
            return {
                obj: {},
                services: []
            }
        },

        components: {
            Icon,
            Button,
            Tabs,
            Tab
        },

        created() {
            this.getDetail();
        },
        
        computed: {
            descObj() {
                let service = {};
                let obj; 
                for (let i=1;i<=6;i++) {
                    // 找到type的值等于i的对象  i = 1
                    obj = this.services.find(item=> {
                        return item.type == i;
                    });
                    // 把所有的描述信息装到一个对象里面去
                    service['s'+i] = obj && obj.description || '暂无信息';
                }
                console.log('service', service);
                return service;
            }
        },

        methods: {
            getDetail() {
                let {
                    id
                } = this.$route.params;
                let url = `/cinema/${id}`;
                loadingBegin();
                this.fetch(url, {}, (res) => {
                    this.obj = res.cinema;
                    this.services = this.obj.services;
                    loadingFinish();
                })
            },
            
            findServer(type) {
                if (this.servers) {
                    let server = this.servers.find((item) => {
                        return item.type === type;
                    })
                    return server || {};
                } else {
                    return {}
                }

            }
        }

    }

</script>
